<template>
  <el-dialog title="积分赚钱" :lock-scroll="false" :visible.sync="visible" customClass="integral-list">
    <div class="il-title">
      <span class="il-title-text">任务</span>
      <span class="il-title-text">积分</span>
      <span class="il-title-text">状态</span>
    </div>
    <ul class="integral-list-view">
      <li v-for="(val, key) in checkList">
        <p>{{val.text}}</p>
        <template v-if="val.name === 'dayChick'">
          <button @click="signTodayCompant(val)">{{val.status > 0 ? '已签到' : '签到'}}</button>
          <em>+{{val.fraction}}分</em>
        </template>
        <template v-else>
          <button v-if="val.type" :class="{no: val.status < 0}">{{val.status > 0 ? '完成' : '未完成'}}</button>
          <em>+{{val.fraction}}分</em>
        </template>
      </li>
    </ul>
    <!--<a class="foot-a" href="">去赚钱</a>-->
  </el-dialog>
</template>

<script>
  export default {
    name: 'points-money',
    data () {
      return {
        visible: false,
      }
    },
    props: {
      checkList: {
        default: false
      }
    },
    methods: {
      showToggle () {
        this.visible = !this.visible
      },
      signTodayCompant (val) {
        console.log('val', val)
        this.$emit('on-Today', val)
      }
    }
  }
</script>

<style lang="scss">
  .integral-list {
    width: 550px;
    height: 602px;
    background-color: #ffffff;
    border-radius: 5px;
    .el-dialog__header {
      text-align: center;
    }
    .el-dialog__title {
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      color: #333333;
      position: relative;
      &:before {
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        left: -30px;
        top: 10px;
      }
      &:after {
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        right: -30px;
        top: 10px;
      }
    }
    .el-dialog__body {
      padding: 15px;
    }
    .il-title {
      border-bottom: solid 2px #2e84da;
      .il-title-text {
        display: inline-block;
        width: 32%;
        text-align: center;
        font-size: 14px;
        color: #2e84da;
        padding-bottom: 5px;
      }
    }
    .integral-list-view {
      font-size: 14px;
      li {
        overflow: hidden;
        height: 32px;
        border-bottom: 1px solid #c9d7e3;
        padding: 3px 20px 0;
        &:first-child {
          background-color: #eef7ff;
        }
      }
      p {
        float: left;
      }
      em {
        float: right;
        width: 54px;
      }
      button {
        width: 55px;
        height: 25px;
        background-color: #2e84da;
        border-radius: 3px;
        line-height: 25px;
        text-align: center;
        float: right;
        color: #fff;
      }
      .no {
        width: 55px;
        height: 25px;
        background-color: #fff;
        border-radius: 3px;
        line-height: 25px;
        text-align: center;
        float: right;
        color: #606060;
      }
    }
    .foot-a {
      width: 130px;
      height: 35px;
      background-color: #1968b1;
      border-radius: 3px;
      margin: 20px auto 0;
      text-align: center;
      line-height: 35px;
      display: block;
      color: #ffffff;
    }
  }
</style>
